<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="business-map" v-show="!showDetail">
    <div class="business-map__search">
      <div class="left-btn">
        <el-button size="small" link type="primary" icon="Plus" @click="addMap">创建系统地图</el-button>
      </div>
      <div class="right-search__item">
        <el-form inline ref="queryFormRef" :model="queryParams" label-width="100px" size="small">
          <el-form-item label="业务场景名称:" prop="sceneName">
            <el-input style="width: 200px" v-model="queryParams.sceneName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="业务系统名称:" prop="systemName">
            <el-input style="width: 200px" v-model="queryParams.systemName" placeholder="请输入" />
          </el-form-item>
          <el-form-item class="query_btns">
            <el-button size="small" type="primary" icon="search" @click="doQuery">查询</el-button>
            <el-button size="small" type="default" icon="refresh" @click="doReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-divider style="margin: 5px 0;"></el-divider>
    <div class="cards business-map__list" v-loading="loading">
      <div class="card" v-for="item in cardsList" :key="item">
        <div class="bg"></div>
        <div class="info">
          <div class="left">
            <!-- <div class="pic">{{ item?.sceneName?.slice(0,1) }}</div> -->
            <img :src="mapSvg" alt="icon">
          </div>
          <div class="right">
            <div class="top-label">
              <div class="top-label__item">业务场景：{{ item?.sceneName }}</div>
              <div class="top-label__item">业务系统：{{ item?.systemName }}</div>
            </div>
            <div class="des" title="">{{ item?.description }}</div>
          </div>
        </div>
        <div class="foot">
          <el-link @click="handleOperate(item, 'DEL')">删除</el-link>
          <el-link @click="handleOperate(item, 'EDIT')">编辑</el-link>
          <el-link @click="handleOperate(item, 'VIEW')">查看地图</el-link>
          <el-link @click="handleOperate(item, 'SEARCH')">数据检索</el-link>
        </div>
      </div>
    </div>
  </div>
  <el-dialog title="创建系统地图" v-model="mapVisible" @close="mapVisible = false" width="600">
    <div class="params-form">
      <el-form ref="paramRef" size="small" :rules="rules" :model="formData" label-width="120px">
        <el-form-item label="业务场景：" prop="sceneId">
          <el-select style="width: 100%;" v-model="formData.sceneId" clearable placeholder="请选择" @change="getSystemList">
            <el-option v-for="item in businessList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务系统：" prop="systemId">
          <el-select style="width: 100%;" v-model="formData.systemId" filterable clearable placeholder="请选择" @change="filterTree">
            <el-option v-for="item in systemList" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input style="width: 100%;" type="textarea" rows="3" v-model="formData.description" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="startCreate"> 开始创建 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="BusinessMapList" setup>
import mapSvg from "@/assets/images/map.svg";
// import BusinessDetail from './component/BusinessDetail.vue';
import { getBusinessMapList, deleteBusinessMap } from '@/api/businessMap/index';
import { getBusinessSystemList } from '@/api/businessSystem';
const emit = defineEmits(['handleEvent']);
//卡片列表
const cardsList = ref([]);
// 展示详情页面
const showDetail = ref(false);
// 点击查看的业务场景
const businessData = ref(null);
const loading = ref(false);
const mapVisible = ref(false);
const businessList = ref([]);
const systemList = ref([]);
const businessAll = ref([]);
const queryFormRef = ref();
const formData = ref({
  systemId: '',
  sceneId: '',
  description: ''
});
const paramRef = ref();
const queryParams = ref({
  pageNum: 1,
  pageSize: 9999,
  sceneName: '',
  systemName: '',
  isAsc: 'descending'
});
const rules = ref({
  sceneId: [{ required: true, message: '请选择业务场景', trigger: 'blur' }],
  systemId: [{ required: true, message: '请选择业务系统', trigger: 'blur' }],
})
const doReset = () => {
  queryFormRef.value.resetFields();
  doQuery();
}
// 查看详情
const handleOperate = (row, type) => {
  if (type == 'VIEW') {
    emit('handleEvent', { component: 'MapDetail', row: row });
  } else if (type == 'EDIT') {
    emit('handleEvent', { component: 'MapOperate', row: row, type: 'EDIT', });
  } else if (type == 'DEL') {
    ElMessageBox.confirm(`是否确认删除业务系统:${row.systemName}?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deleteBusinessMap(row.id).then(res => {
        ElMessage({ showClose: true, message: '删除成功！', type: 'success' });
        doQuery();
      })
    });
  } else if (type == 'SEARCH') {
    emit('handleEvent', { component: 'SearchDataList', row: row, params: {
      'modelName': '',
      'systemName': row.systemName,
      'sceneName': row.sceneName,
    } });
  }
};
// 开始创建
const startCreate = () => {
  paramRef.value.validate((valid) => {
    if (!valid) {
      return;
    } else {
      emit('handleEvent', { component: 'MapOperate', row: null, type: 'ADD', params: formData.value });
    }
  })
}
const getBusinessList = () => {
  getBusinessSystemList({
    pageNum: 1,
    pageSize: 9999
  }).then(res => {
    businessAll.value = res.rows;
    businessList.value = res.rows.filter(item => item.type == 0)
  })
}
const getSystemList = (val) => {
  formData.value.systemId = '';
  if (val) {
    systemList.value = businessAll.value.filter(item => item.parentId == val && item.type == 1)
  }
}
const addMap = () => {
  mapVisible.value = true;
  // emit('handleEvent', { component: 'MapOperate', row: null });
}
const doQuery = () => {
  cardsList.value = [];
  loading.value = true;
  getBusinessMapList(queryParams.value)
    .then((res) => {
      if (res) {
        cardsList.value = res?.rows;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
onMounted(()=>{
  getBusinessList();
  doQuery();
})
</script>
<style lang="scss" scoped>
.business-map {
  height: calc(100vh - 84px);
  width: 100%;
  padding: 20px;
  background: #fff;
  font-size: 12px;
  .business-map__search {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    .left-btn {

    }
  }
  .cards {
    width: 100%;
    height: calc(100vh - 146px);
    // background: rgba(245, 245, 245, 1);
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    overflow-y: auto;
    padding: 10px 0;
    .card {
      position: relative;
      height: 200px;
      background: #fff;
      border: 1px solid #d9d9d9;
      margin: 0 0 20px 20px;
      // flex: 0 0 24%;
      border-radius: 10px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      // opacity: 0.25;
      // background: rgba(61, 102, 224, 1);
      // filter: blur(54px);
      .bg {
        position: absolute;
        left: 5%;
        top: 20px;
        width: 90%;
        height: 180px;
        // opacity: 0.25;
        // background: rgba(61, 102, 224, 1);
        // filter: blur(54px);
      }
      .info {
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        padding: 10px;
        padding-top: 20px;
        .left {
          width: 80px;
          img {
            height: 80px;
            width: 80px;
          }
          .pic {
            height: 40px;
            width: 40px;
            background: #409eff;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }
        }
        .right {
          width: 300px;
          padding-left: 10px;
          .top-label {
            width: 100%;
            .top-label__item {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 28px;
              font-weight: 600;
              letter-spacing: 0px;
              line-height: 28.13px;
              color: rgba(32, 40, 66, 1);
            }
          }
          .name {
            font-weight: 600;
            font-size: 16px;
          }
          .des {
            margin: 5px 0 10px 0;
            color: rgba(32, 40, 66, 1);
            display: -webkit-box;          /* 兼容旧版弹性盒子 */
            -webkit-box-orient: vertical;  /* 设置文本方向为垂直排列 */
            -webkit-line-clamp: 5;         /* 限制显示行数（例如3行） */
            overflow: hidden;              /* 隐藏溢出内容 */
            text-overflow: ellipsis;       /* 显示省略号 */
          }
        }
      }
      .foot {
        height: 50px;
        width: 100%;
        // background: #f7f9fa;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
  :deep(.el-link__inner) {
    font-size: 12px;
    color: #409eff;
  }
}
</style>
